/* resets */
*{
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
*:before, *:after{
	box-sizing: border-box;
}
html, body{
	min-height: 100%;
}
body{
	background-color: #81F4E1;
}
/* for the ice cream and shadow */
.icecream{
	position: absolute;
	width: 10vw;
	height: 27.5vw;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
.icecream:before{
	content: "";
	position: absolute;
	bottom: -5vw;
	width: 10vw;
	height: 2.5vw;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	-webkit-filter: blur(20px);
	filter: blur(20px);
}

/* let's make some strawberry ice cream */
.icecream .ice{
	position: absolute;
	background-color: #FF729F;
	border-radius: 50%;
	width: 10vw;
	height: 10vw;
	z-index: 0;
}
.icecream .dot{
	position: absolute;
	background-color: #FF729F;
	border-radius: 50%;
	width: 1.66667vw;
	height: 1.66667vw;
	top: 7.5vw;
	transform: translateY(-50%);
	z-index: 2;
}
.icecream .dot:nth-of-type(2){
	left: 3.33333vw;
}
.icecream .dot:nth-of-type(3){
	left: 6.66667vw;
}
.icecream .dot:before{
	content: "";
	position: absolute;
	left: 100%;
	border-radius: 50%;
	background-color: #FF729F;
	width: 100%;
	height: 100%;
}
/* for the cone */
.icecream .waffle{
	position: absolute;
	top: 7.5vw;
	z-index: 1;
}
.icecream .waffle:before{
	content: "";
	position: absolute;
	border-top: 20vw solid #CF9950;
	border-left: 5vw solid transparent;
	border-right: 5vw solid transparent;
}